<script lang="ts" setup>
	import { ref } from 'vue'
	import orderListVue from './components/order_list.vue'
	const tabIndex = ref(0)
	const tabData = ref([
		{ label: '问诊', render: true, type: 1 },
		{ label: '极速', render: false, type: 2 },
		{ label: '药品', render: false, type: 3 },
	])

	const tabChange = (index) => {
		tabIndex.value = index
		tabData.value[index].render = true
	}
</script>
<template>
	<!-- 顶部的 tab 全局组件 -->
	<custom-tab :data="tabData" @change="tabChange"></custom-tab>
	<!-- 列表 局部组件 -->
	<!-- v-show 控制显示隐藏，实现切换 -->
	<view v-for="(item, index) in tabData" v-show="tabIndex === index">
		<!-- v-if 结合状态变量避免重复初始化浪费性能 -->
		<orderListVue :type="item.type" v-if="item.render"></orderListVue>
	</view>
</template>

<style lang="scss"></style>
